$my_color:#03e9f4;

@mixin btn_span($direction,$angle,$delay) {
  position: absolute;
  opacity: 0;
  background-image:linear-gradient($angle,transparent,$my_color) ;
  animation: run#{$direction} 1s linear infinite;
  animation-delay: $delay;
  box-shadow: 0 0 5px $my_color;
  transition: .3s;
}


*{
  padding: 0;
  margin: 0;
  user-select: none;
}

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #050801;
}

.container{
  width: 80vw;
  height: 40vw;
  background-color:transparent;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  div{
    width: 20%;
    height: auto;
    position: relative;
    padding: 50px 20px;
    text-align: center;
    font: 3em fantasy,SimSun;
    font-weight: bold;
    color: $my_color;
    transition: .3s;
    overflow: hidden;
    letter-spacing: .2em;
    -webkit-box-reflect:below 1px linear-gradient(transparent,#0005);

    &.btn_1{
      filter: hue-rotate(290deg);
    }
    &.btn_3{
      filter: hue-rotate(110deg);
    }

    span:nth-child(1){
      width: 100%;
      height: 2px;
      top: 0;
      left: 0;
      @include btn_span(X,90deg,0);
    }
    span:nth-child(2){
      width: 2px;
      height: 100%;
      top: 0;
      right: 0;
      @include btn_span(Y,180deg,0.25s);
    }
    span:nth-child(3){
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      @include btn_span('X-',-90deg,.5s);
    }
    span:nth-child(4){
      width: 2px;
      height: 100%;
      top: 0;
      left: 0;
      @include btn_span('Y-',-180deg,.75s);
    }
    

    &:hover{
      color: #050801;
      text-shadow: 0 0 5px #050801;
      background-color: $my_color;
      box-shadow: 0 0 5px $my_color,
                  0 0 25px $my_color,
                  0 0 50px $my_color,
                  0 0 200px $my_color;

     
    }
  }
}

@keyframes runX {
  0%{transform: translateX(-100%);opacity: 1;}
  50%,100%{transform: translateX(100%);opacity: 0;}
}

@keyframes runX- {
  0%{transform: translateX(100%);opacity: 1;}
  50%,100%{transform: translateX(-100%);opacity: 0;}
}
@keyframes runY {
  0%{transform: translateY(-100%);opacity: 1;}
  50%,100%{transform: translateY(100%);opacity: 0;}
}
@keyframes runY- {
  0%{transform: translateY(100%);opacity: 1;}
  50%,100%{transform: translateY(-100%);opacity: 0;}
}